<template>
  <div class="dashboard-container">
    <!-- 左侧菜单栏 -->
    <el-aside width="250px" class="sidebar">
      <el-menu default-active="1" class="menu" mode="vertical" theme="dark">
        <!-- 企业管理菜单项 -->
        <el-menu-item index="1" @click="handleMenuClick('enterprise')">
          <i class="el-icon-office-building"></i>
          <span>企业管理</span>
        </el-menu-item>

        <!-- 股权关系管理菜单项 -->
        <el-menu-item index="5" @click="handleMenuClick('equity-relationship')">
          <i class="el-icon-office-building"></i>
          <span>股权关系管理</span>
        </el-menu-item>

        <!-- 其他菜单项 -->
        <el-menu-item index="2" @click="handleMenuClick('user-management')">
          <i class="el-icon-user"></i>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="handleMenuClick('report')">
          <i class="el-icon-data-line"></i>
          <span>数据报告</span>
        </el-menu-item>
        <el-menu-item index="4" @click="handleMenuClick('settings')">
          <i class="el-icon-setting"></i>
          <span>系统设置</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧主内容区域 -->
    <el-main>
      <div class="content-container">
        <el-card class="content-card">
          <!-- 动态加载不同的组件 -->
          <component :is="currentComponent" />
        </el-card>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import EnterpriseManagement from '@/components/EnterpriseManagement.vue'; // 企业管理组件
import EquityRelationshipManagement from '@/components/EquityRelationshipManagement.vue'; // 股权关系管理组件

const currentPage = ref('enterprise');  // 当前页面
const pageTitle = ref('企业管理');  // 当前页面标题

const currentComponent = computed(() => {
  switch (currentPage.value) {
    case 'enterprise':
      return EnterpriseManagement;
    case 'equity-relationship':
      return EquityRelationshipManagement; // 股权关系管理
    case 'user-management':
      return null; // 用户管理（后续实现）
    case 'report':
      return null; // 数据报告（后续实现）
    case 'settings':
      return null; // 系统设置（后续实现）
    default:
      return EnterpriseManagement; // 默认显示企业管理
  }
});

// 处理菜单点击事件
const handleMenuClick = (page) => {
  currentPage.value = page;
  switch (page) {
    case 'enterprise':
      pageTitle.value = '企业管理';
      break;
    case 'equity-relationship':
      pageTitle.value = '股权关系管理';
      break;
    case 'user-management':
      pageTitle.value = '用户管理';
      break;
    case 'report':
      pageTitle.value = '数据报告';
      break;
    case 'settings':
      pageTitle.value = '系统设置';
      break;
    default:
      pageTitle.value = '企业管理';
  }
};
</script>

<style scoped>
.dashboard-container {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

.sidebar {
  background-color: #2c3e50;
  color: white;
  padding-top: 20px;
}

.menu {
  width: 100%;
  height: 100%;
  background-color: #2c3e50;
}

.el-menu-item {
  font-size: 16px;
  margin-bottom: 10px;
  color: rgb(255, 255, 255);
}

.el-menu-item .el-icon-office-building,
.el-menu-item .el-icon-user,
.el-menu-item .el-icon-data-line,
.el-menu-item .el-icon-setting {
  margin-right: 10px;
}

/* 调整选中的菜单项颜色和对比度 */
.el-menu-item.is-active {
  background-color: #2980b9;
  color: #fff !important;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.el-button {
  margin-top: 20px;
}

.content-container {
  padding: 20px;
  flex-grow: 1;
}

.content-card {
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
